const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    bundle: path.join(__dirname, './src/main.js'),
    vendor: ['jquery']
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/[name].js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: "index.html"
    }),
    new webpack.optimize.SplitChunksPlugin({
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }
      }
    }),
    new ExtractTextPlugin("css/styles.css"),
  ],
  module: {
    rules: [
      {test: /\.css$/, use: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader", publicPath: "../"})},
      {test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'sass-loader'], publicPath: "../"})},
      {test: /\.(png|svg|jpg|gif)$/i, use: ['url-loader?limit=34010&name=images/[hash:8]-[name].[ext]']},
      {test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']}
    ]
  }
}
